<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setCharacterEncoding("UTF-8") ;
%>
<jsp:include page="../common/header.jsp">
    <jsp:param name="title" value="用户管理页面"/>
</jsp:include>

<div class="container-fluid">
    <div class="row">
        <!-- 左边的导航栏 sidebar-->
        <jsp:include page="../common/sidebar.jsp">
            <jsp:param name="menuId" value="#systemMenu"/>
            <jsp:param name="subMenuId" value="#userSubMenu"/>
        </jsp:include>
    </div>

    <!-- 右边区域 主区域的内容 -->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
        <h2>角色管理</h2>

        <!-- toolbar  -->
        <div class="panel panel-primary">
            <div class="panel-body">
                <div id="toolbar" >
                    <form class="form-inline" style="width:100%; margin-bottom: 20px;">
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="新增角色" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary" >
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="删除角色" id="deleteBtn" class="btn btn-info" onclick="deleteUser()">
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <input type="button" value="修改角色" id="editBtn" class="btn btn-danger" onclick="editUser()">
                        </div>
                        <div class="form-group" style="margin-left: 5px;">
                            <label for="queryName"></label>
                            <input type="text" id="queryName" class="form-control" placeholder="角色名">
                            <input type="button" class="btn btn-success" id="queryBtn"  value="查询" onclick="queryUser()">
                        </div>
                    </form>

                </div>
                <div class="container" style="width:100%;margin-top: 20px;">
                    <!--放一个table元素-->
                    <table id="table"></table>
                </div>
            </div>
        </div>

        <!-- 新增角色模态窗体 -->
        <div class="modal fade" id="addUserModal" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="resetForm()"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">角色信息</h4>
                    </div>
                    <div class="modal-body">

                        <form id="addUserForm" class="form-horizontal" action="user/add"  method="post">
                            <input type="hidden" name ="id" id="userId">
                            <div class="form-group">
                                <label for="username" class="col-sm-4 control-label">角色名：</label>
                                <div class="col-sm-8">
                                    <input type="text" name="username" id="username" class="form-control">
                                </div>
                            </div>
                            <%--<div class="form-group">--%>
                                <%--<label for="pwd" class="col-sm-4 control-label">密码：</label>--%>
                                <%--<div class="col-sm-8">--%>
                                    <%--<input type="text" name="pwd" id="pwd" class="form-control">--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <%--<div class="form-group">--%>
                                <%--<label for="pwd" class="col-sm-4 control-label">角色：</label>--%>
                                <%--<div class="col-sm-8">--%>
                                    <%--<select class="form-control" id="role" name="role" >--%>
                                        <%--<option disabled selected>---请选择---</option>--%>
                                        <%--<option value="1">管理员</option>--%>
                                        <%--<option value="2">报修人员</option>--%>
                                        <%--<option value="3">调度人员</option>--%>
                                        <%--<option value="4">维修人员</option>--%>
                                    <%--</select>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetForm()">取消</button>
                        <button type="button" class="btn btn-primary" onclick="addUser()">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
</div>

<jsp:include page="../common/footer.jsp"></jsp:include>

<%--<script>--%>
<%--    // 处理菜单的高亮显示问题--%>
<%--    // 当页面加载完成后，立刻执行一个在匿名函数--%>
<%--    $(document).ready(function () {--%>
<%--        $('a.nav-link').removeClass("active")--%>
<%--        $('a.dropdown-item').removeClass("active")--%>

<%--        $('#systemMenu').addClass("active")--%>
<%--        $('#userSubMenu').addClass("active")--%>

<%--        $('#collapseThree').addClass('collapse')--%>
<%--        $('#collapseThree2').addClass('show')--%>
<%--    });--%>
<%--</script>--%>
<script type="text/javascript">
    /*当页面加载完成后，立刻执行这个函数*/
    $(function(){
        initTable();

    });
    function initTable(){
        //用于将table销毁，如果不用【则会保留上次加载的内容】
        $("#table").bootstrapTable('destroy');
        $("#table").bootstrapTable({
            method:"POST",
            contentType : "application/x-www-form-urlencoded",
            dataType:"json",
            url:"${pageContext.request.contextPath}/api/servlet/user/queryList",//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
            queryParams:queryParam,
            striped: true,
            pagination:true,
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [5, 10, 25],        //可供选择的每页的行数（*）
            uniqueId: "id",
            sidePagination: "server", 			//server表示服务端分页，client客户端分页
            singleSelect:true,
            clickToSelect:true,
            showRefresh:true,
            showToggle:true,
            toolbar:"#toolbar",
            columns:[{
                field:"state",
                checkbox:"true"
            },{
                field:"id",
                title:"ID"
            },{
                field: 'rolename',
                title: '角色名',
                sortable : true
            },{
                field: 'del',
                title: 'del'
            }]
        });
    }
    function queryParam(params){
        console.info(params);
        // this 表示当前的bootStrap-table 的实例
        console.log(this);
        var param = {
            queryName:$("#queryName").val(),
            limit : params.limit, // 数据集合大小
            offset : params.offset, // 页码
            pageIndex : this.pageNumber,
            pageSize : this.pageSize
        };
        console.info(param);
        return param;

    }
    //新增用户
    function addUser(){
        var param = $("#addUserForm").serializeArray();
        var id = $("#userId").val();
        var url = "${pageContext.request.contextPath}/api/servlet/user/addrole";//这个是servlet的注释的urlPattern,记得改，
        // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
        <%--if ( id != '') {--%>
            <%--url = "${pageContext.request.contextPath}/api/servlet/user/update"--%>
        <%--}--%>
        console.log(param)
        $.ajax({
            url:url,
            method:"post",
            data:param,
            dataType:"json",
            success:function(data){
                if (data.status = "success") {
                    $("#table").bootstrapTable("refresh");
                    $("#addUserModal").modal("hide");
                    resetForm();
                }
                alert(data.message);
            },
            error:function(data){

                alert("服务器异常！");
            }
        });

    }

    //清空表单数据
    function resetForm(){
        //form 有个方法是 reset()，作用不是清空 <form> 标签中的所有输入栏，
        // 而是回到上一次载入页面时的状态。（页面初始化时的状态）
        document.getElementById("addUserForm").reset();
        $("#addUserForm").find('input[type=text],input[type=hidden]').each(function(){
            // 清除 value值
            $(this).val('');
        });
        // 问题应该是这里的问题。
    }
    //删除角色
    function deleteUser(){

        var rows = $("#table").bootstrapTable('getSelections');
        if (rows.length<=0 ) {
            alert("请选择一条记录！");
            return;
        }
        console.log(rows);
        var id = rows[0].id;
        var username = rows[0].username;
        var data = {"id":id,"username":username};

        console.log(data);
        $.ajax({
            url:"${pageContext.request.contextPath}/api/servlet/user/delete",//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
            method:"post",
            dataType:"json",
            contentType:"application/json;charset=UTF-8",
            data:JSON.stringify(data),
            success:function(data){

                alert(data.message);
                $("#table").bootstrapTable("refresh");
            },
            error:function(data){
                console.log(data);
                alert("服务器异常！！");
            }

        });
    }
    //修改用户信息
    function editUser(){
        var rows = $("#table").bootstrapTable('getSelections');
        if (rows.length<=0 ) {
            alert("请选择一条记录！");
            return;
        }

        var row = rows[0];
        $("#userId").val(row.id);
        $("#username").val(row.username);
        $("#pwd").val(row.pwd);

        $("#addUserModal").modal("show");

    }

    //查询用户
    function queryUser(){
        $("#table").bootstrapTable("refresh");
    }

    // 当页面加载完成后，立刻执行
    $(document).ready(function(){
        // 获取所有的角色数据
        $.ajax({
            url: "${pageContext.request.contextPath}/api/servlet/role/queryall",//这个是servlet的注释的urlPattern,记得改，
            // 这个urlPattern是区域管理的servlet,加入新的servlet并设置urlPattern后修改
            method: "post",
            success: function( result ) {
                console.log(result);
                if(result){
                    $("#role").empty()
                        .append("<option disabled selected>---请选择---</option>");
                    for (var i = 0; i < result.length; i++) {
                        $("#role")
                            .append(("<option value='" + result[i].id + "'>" + result[i].rolename + "</option>"));
                    }
                }

            }
        });

    });
</script>
</body></html>